<template>
  <div class="trend">
    <div class="text" :style="{color: textColor}">
      <slot v-if="slots.default"></slot>
      <div v-else>{{text}}</div>
    </div>
    <div class="icon">
      <component :is="`el-icon-${toLine(upIcon)}`" :style="{color: upColor}" v-if="type === 'up'"></component>
      <component :is="`el-icon-${toLine(downIcon)}`" :style="{color: downColor}"  v-else></component>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useSlots} from "vue";
import {toLine} from "../../../utils";

let slots = useSlots()
let props = defineProps({
  type: {
    type: String,
    default: 'up'
  },
  text: {
    type: String,
    default: '文字'
  },
  upColor: {
    type: String,
    default: '#f5222d'
  },
  downColor: {
    type: String,
    default: '#52c41a'
  },
  textColor: {
    type: String,
    default: 'black'
  },
  upIcon: {
    type: String,
    default: 'ArrowUp'
  },
  downIcon: {
    type: String,
    default: 'ArrowDown'
  }
})


</script>

<style lang="scss" scoped>
.trend {
  display: flex;
  align-items: center;
  .text {
    font-size: 15px;
    margin-right: 4px;
  }
}
</style>